使用win10愉快地建立GitHub Pages+Hexo个人博客并实现多端编辑和图片托管

建立博客

安装

  1. 安装Node.js

    Node.js官网

  2. 安装Git

    Git官网

  3. 安装Hexo

    新建一个用来储存hexo源码的地方

    打开右键菜单，发现Git安装成功后多了两个选项

    Git右键选项

    选Git Bash Here，在展开的bash命令窗口中依次输入以下命令

    1
    2
    3
    4
    5
    $ npm install hexo-cli -g #安装创建hexo工程文件模块
    $ hexo init blog #创建一个新的文件夹blog并初始化
    $ cd blog #进入blog文件夹
    $ npm install #依据初始化文件开始安装hexo模块
    $ hexo server #可运行可不运行，只是启动本地服务为了验证是否安装成功

    hexo-cli与hexo模块的区别

    如果安装过程中没有出现问题，命令行会返回如下文字并挂起

    img

    此时目录情况如下

    1
    2
    3
    4
    5
    6
    7
    8
    node_modules  npm 文件缓存目录
    scaffolds     文夹件下存放的是文章、页面模版
    scource       文夹件下存放的是我们的资源文件
    themes        文件下存放的是我们的主题文件
    .gitignore    git 忽略文件，设置提交文件时，哪些文件不提交
    _config.yml   站点配置文件
    package.json  站点版本，站点依赖文件
    yarn.lock     yarn.lock 文件由 Yarn 自动创建，并且完全通过 Yarn 进行操作。

    在浏览器输入 http://localhost:4000/ 就可以访问刚刚创建的博客了，按Ctrl+C可以停止本地服务的运行。如下图 :

    img

    如果这是在vps上搭建的，此时已经可以让其他人通过你的ip或域名访问了。但是为了剩下vps钱，为了GitHub上多点绿，懒得配置域名，为了稳定可靠的托管，我们选择将博客发布到GitHub Pages上。

配置

  1. SSH key

    在命令行中输入

    1
    $ ssh-keygen -t rsa -C "你的邮箱"

    -t type缩写，即指定密钥的类型，这里选择RSA加密算法

    -b bit缩写，指定密钥长度。对于RSA密钥，最小要求768位，默认是2048位。此处省略

    -C comment缩写，表示要提供一个新注释，用于识别这个密钥，所以“”里面不一定非要填邮箱，可以是任何内容，邮箱仅仅是识别用的key

    接着会让你输入文件名，直接回车跳过则会默认以默认文件名“id_rsa”生成密钥文件

    后面让你输入两次密码，此处密码是之后每次提交hexo静态文件至GitHub时需要输入的博文，为了方便此处跳过。

    创建成功后，会生成以下三个文件（可能没有known_hosts，不过并没有关系）

    SSHKey

  2. Github配置

    创建一个新的仓库

    Creat new repository

    创建成功后，会进入仓库页面，点开“Clone or download”，会发现两个用于同步的链接，一个是 Https，一个是 SSH 。Https 每次提交都需要输入用户名和密码，SSH 只要添加了 SSH key 值，（且之前没有设置密码），以后提交不需要输入用户名和密码。

    sshlink

    用Notepad++或者其他随便什么文本编辑器打开刚才创建的“id_rsa.pub”

    文件目录在”C:\Users\你的用户名\.ssh“

    拷贝其中内容

    或者可以通过如下命令拷贝 SSH key 的内容 ：

    1
    2
    > $ clip < ~/.ssh/id_rsa.pub
    >

    现在已拷贝了 SSH key 的内容，那么 GitHub 如何添加 SSH key 呢 ？点击右上角头像，然后点击Settings 。如图 ：

    img

    然后点击 New SSH key，如图 ：

    img

    把之前拷贝的内容粘贴到 key 里面，然后点击 Add SSH key，如图 ：

    img

    怎么去验证是否已经添加成功了呢 ？通过如下命令 ：

    1
    $ ssh -T git@github.com

    验证成功，如图 ：

    img

  3. Hexo配置

    修改站点配置文件(_config.yml)

    注 ：
    对应的目录 ：blog/_config.yml/，blog 为 hexo init 初始化文件夹的名称，替换成你自己初始化文件夹的名称。

    修改 depoly ：

    1
    2
    3
    4
    deploy:
      type: git 
      repo: git@github.com:username.github.io.git
      branch: master

    img

    注 ：如上图所示，找到 GitHub 上对应的远程仓库地址，点击右侧复制按钮，把 “git@github.com:username.github.io.git“ 替换成刚刚复制的远程仓库地址。

    修改 site 相关信息 ：

    1
    2
    3
    4
    5
    6
    7
    title: xx
    subtitle:     
    description:
    keywords:
    author: xx
    language: zh-Hans
    timezone:

    注 ：网站名称（title），作者 (author)，语言 (language)

使用

  1. 普通使用

    • 更新博客

      这样其实就可以投入使用了

      生成静态文件

      1
      $ hexo g

      提交到远程仓库

      1
      $ hexo d

      等待个几分钟（GitHub Pages同步有延迟），你就可以在 github 上看见我们提交的静态文件了，也可以通过 http://username.github.io 访问我们的博客了，username 改成你的github 用户名。

    • 发布新博文

      1
      $ hexo new "博文标题"
会在source/_post文件夹中生成一篇新的的MarkDown文档，当你编辑好后，重复更新博客的步骤就可以同步到GitHub Pages了。

  1. 修改主题

    TODO

多端编辑

TODO

图片托管

TODO